---
title: List with inputs
description: A guide to use Fluid DnD to adding forms and inputs.
---

import SingleVerticalPersonList from "@/components/vue/SingleVerticalPersonList.vue";
import { Code } from "@astrojs/starlight/components";

### List of number example

To showing how to use **Fluid DnD** for sorting a list with editable data.
First, we're going to create a list of people:

export const listOfPeople = `<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";

const list = ref([
  { number: 1, name: "Carlos", edit: false },
  { number: 2, name: "Jorge", edit: false },
  { number: 1, name: "Ivis", edit: false },
]);
const [ parent ] = useDragAndDrop(list);

</script>`;

<Code code={listOfPeople} lang="vue" />

Next, create a list of people on vue template and pass the attributes to be modified to `v-model`:

export const highlights = [`v-model="person.name"`, `v-model="person.edit"`];

export const listOfNumbersHTML = `
</script>
<template>
  <ul ref="parent" class="person-list p-8 bg-[var(--sl-color-gray-6)]">
    <li class="person" v-for="(person, index) in list" :index="index">
      <input type="text" v-model="person.name" :disabled="!person.edit" />
      <input type="checkbox" v-model="person.edit" />
    </li>
  </ul>
</template>

<style>
.person {
  border-style: solid;
  padding-left: 5px;
  margin-top: 0.25rem;
  border-width: 2px;
}
.person input[type="text"] {
  width: 100px;
  margin: 10px;
}
.person-list {
  display: block;
  padding-inline: 25px;
}
</style>

`;

<Code code={listOfNumbersHTML} mark={highlights} lang="vue" />

### Preview

<div class="pl-8">
  <SingleVerticalPersonList client:load />
</div>
